<template>
  <div class="supplier-page">
    <!-- 搜索框模块 -->
    <el-card>
      <el-row>
        <el-col :span="24">
          <el-form :model="form" label-width="100px" v-show="showSearch">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="供应商名称" id="index">
                  <el-input
                    placeholder="请输入供应商名称"
                    clearable
                    v-model="form.supplierName"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="14">
                <el-button type="primary" icon="Search" @click="handleQuery"
                  >搜索</el-button
                >
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>

      <el-row style="margin-bottom: 10px">
        <el-col :span="5">
          <el-button plain type="primary" icon="Plus" @click="handleAdd"
            >新增</el-button
          >
        </el-col>

        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table
        v-loading="loading"
        max-height="600"
        height="440"
        :data="tableData"
        stripe
        border
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column
          prop="supplierName"
          width="250"
          label="供应商名称"
        ></el-table-column>
        <el-table-column
          prop="socialCreditCode"
          width="200"
          label="社会信用代码"
        ></el-table-column>
        <el-table-column prop="contacter" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="address" label="联系地址">
          <template v-slot:default="scope">
            <span
              >{{ scope.row.provinceName }}{{ scope.row.cityName
              }}{{ scope.row.address }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="主营产品">
          <template v-slot:default="scope">
            <span>{{
              changeProductToString(scope.row.supplierDeviceTypeList)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button
              icon="Edit"
              type="primary"
              link
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              icon="Delete"
              type="danger"
              link
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 全局分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="paginationData.page"
        v-model:limit="paginationData.limit"
        @pagination="getList"
      ></pagination>
    </el-card>

    <!-- 新增-修改弹框 -->
    <el-dialog
      v-model="dialogShow"
      :title="dialogTitle + '供应商'"
      width="50%"
      v-if="dialogShow"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form
        label-width="120"
        :model="newForm"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input
                v-model="newForm.supplierName"
                placeholder="请输入供应商名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="社会信用代码" prop="socialCreditCode">
              <el-input
                v-model="newForm.socialCreditCode"
                placeholder="请输入供应商社会信用代码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="newForm.phone"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contacter">
              <el-input
                v-model="newForm.contacter"
                placeholder="请输入联系人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="联系地址" prop="province">
              <!-- {{regionData}} -->
              <el-select
                value-key="areaCode"
                v-model="newForm.province"
                placeholder="请选择省"
                @change="changeProvince"
              >
                <el-option
                  v-for="item in regionDataArr"
                  :key="item.areaCode"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="city" id="citycontent">
              <el-select
                value-key="areaCode"
                v-model="newForm.city"
                placeholder="请选择市"
                @change="changeCity"
                :disabled="cityDataArr.length > 0 ? false : true"
              >
                <el-option
                  v-for="item in cityDataArr"
                  :key="item.areaCode"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="area" id="areacontent">
              <el-select
                value-key="areaCode"
                v-model="newForm.area"
                placeholder="请选择区/县"
                :disabled="areaDataArr.length > 0 ? false : true"
                @change="changeArea"
              >
                <el-option
                  v-for="item in areaDataArr"
                  :key="item.areaCode"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="详细地址" prop="detailAddress">
              <el-input
                v-model="newForm.detailAddress"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="主营产品" prop="supplierDeviceTypeList">
              <el-select
                @change="mainProductChange"
                v-model="newForm.supplierDeviceTypeList"
                multiple
                placeholder="请选择主营产品"
                style="width: 100%"
                value-key="id"
              >
                <el-option
                  v-for="item in mainProductArr"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="notes">
              <el-input
                v-model="newForm.notes"
                type="textarea"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template v-slot:footer>
        <span>
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  getSupplierData,
  getMainProduct,
  addSupplier,
  getProvinceData,
  editSupplier,
  deleteData,
} from "@/api/supplierManagement";
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const ruleFormRef = ref();

// 规则rules
const rules = ref({});

// 新增表单
const newForm = ref({
  supplierName: "",
  socialCreditCode: "",
  phone: "",
  contacter: "",
  supplierDeviceTypeList: [],
  notes: "",
  // 省市区详细地址
  province: "",
  city: "",
  area: "",
  detailAddress: "",
});

// 主营产品下拉数据
const mainProductArr = ref([]);
// 区数组
const areaDataArr = ref([]);
// 省数据
const regionDataArr = ref([]);

// 城市数组
const cityDataArr = ref([]);
// 省的中文名字
const provinceName = ref("");
// 市的中文名字
const cityName = ref("");
// 区的中文名字
const areaName = ref("");
// 编辑要用的id
const editId = ref("");

// 弹框开关
const dialogShow = ref(false);
// 弹框的标题
let dialogTitle = ref("新增");
const showSearch = ref(true);
const loading = ref(true);
// 搜索表单
const form = reactive({
  supplierName: "",
});
// 分页
const total = ref(0);
const paginationData = reactive({
  page: 1,
  limit: 10,
});

// 表格
const tableData = ref([]);

// 监听主营产品选中时
const mainProductChange = (e) => {
  console.log(e, "<<<=== e 选中主营产品");
};

// 省下拉列表选中时触发
const changeProvince = (e) => {
  console.log(e, "<<<=== e 省");
  newForm.value.city = "";
  newForm.value.area = "";
  provinceName.value = e.name;
  console.log(newForm.value.province, "<<<=== newForm.value.province");
  console.log(provinceName.value, "<<<=== provinceName.value 省的中文名字");
  // 调接口拿到该省的所有市的数据
  getProvinceData(e.areaCode)
    .then((res) => {
      console.log(res, "<<<=== res 拿到市的数据");
      cityDataArr.value = res.data;
    })
    .catch((error) => {
      console.log(error, "error");
    });
};

//  市下拉列表选中时触发
const changeCity = (e) => {
  console.log(e, "<<<=== e 市");
  newForm.value.area = "";
  cityName.value = e.name;
  console.log(cityName.value, "<<<=== cityName.value 市的中文名字");
  // 调接口拿到该市的所有区的数据
  getProvinceData(e.areaCode)
    .then((res) => {
      console.log(res, "<<<=== res 拿到区的数据");
      areaDataArr.value = res.data;
    })
    .catch((error) => {
      console.log(error, "error");
    });
};

// 区下拉列表选中时触发
const changeArea = (e) => {
  console.log(e, "<<<=== e 区");
  areaName.value = e.name;
  console.log(areaName.value, "<<<=== areaName.value 区的中文名字");
};

// 拿表格数据
const getList = () => {
  loading.value = true;
  // 整理查询参数
  const queryData = {
    page: paginationData.page,
    limit: paginationData.limit,
    supplierName: form.supplierName,
  };
  getSupplierData(queryData)
    .then((res) => {
      console.log(res, "res-查询供应商");
      tableData.value = res.page.list;
      loading.value = false;
      total.value = res.page.totalCount;
      // paginationData.currPage
      // paginationData.pageSize
    })
    .catch((error) => {
      console.log(error, "error");
    });
};

// 点击搜索按钮
const handleQuery = () => {
  getList();
};

// 点击重置按钮
const resetQuery = () => {
  form.supplierName = "";
  getList();
};

// 点击新增按钮触发事件
const handleAdd = () => {
  dialogShow.value = true;
  dialogTitle.value = "新增";

  nextTick(() => {
    // 弹框已经渲染，此时能拿到弹框
    console.log(ruleFormRef.value, "<<<=== ruleFormRef.value");
  });

  // 自定义校验规则
  rules.value = {
    supplierName: [
      {
        required: true,
        validator: (rule, value, callback) => {
          console.log(value, "<<<=== value-输入的内容");
          console.log(rule, "<<<=== rule-你写的规则-必填");
          if (value) {
            callback(); // value有值则验证通过
          } else {
            callback(new Error("供应商名称不能为空")); // 验证不通过，返回错误信息
          }
        },
        trigger: "blur",
      },
      { min: 0, max: 15, message: "供应商名称过长", trigger: "blur" },
    ],
    socialCreditCode: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("供应商社会信用代码不能为空"));
          }
        },
        trigger: "blur",
      },
      { min: 0, max: 19, message: "社会信用代码过长", trigger: "blur" },
    ],
    phone: [
      { required: true, message: "请输入正确手机号", trigger: "blur" },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
    contacter: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("联系人不能为空"));
          }
        },
        trigger: "blur",
      },
      { min: 0, max: 6, message: "联系人过长", trigger: "blur" },
    ],
    detailAddress: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("联系地址不能为空"));
          }
        },
        trigger: "blur",
      },
      { min: 0, max: 20, message: "联系地址过长", trigger: "blur" },
    ],
    supplierDeviceTypeList: [
      {
        required: true,
        validator: (rule, value, callback) => {
          console.log(value, "<<<=== value-主营产品的内容-数组");
          if (value.length > 0) {
            callback();
          } else {
            callback(new Error("主营产品不能为空"));
          }
        },
        trigger: "change",
      },
    ],
    province: [
      {
        required: true,
        validator: (rule, value, callback) => {
          console.log(value, "<<<=== value-省的内容-对象");
          if (value) {
            callback();
          } else {
            callback(new Error("省不能为空"));
          }
        },
        trigger: "change",
      },
    ],
    city: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("市不能为空"));
          }
        },
        trigger: "change",
      },
    ],
    area: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("区/县不能为空"));
          }
        },
        trigger: "change",
      },
    ],
    notes: [
      {
        required: false,
        min: 0,
        max: 500,
        message: "备注不能超过500",
        trigger: "blur",
      },
    ],
  };
};

// 写方法将主营产品的产品名称转成一个字符串
const changeProductToString = (data) => {
  const arr = [];
  data.forEach((item) => {
    arr.push(item.typeName);
  });
  console.log(arr.join(), "===>>>拼接结果");
  return arr.join();
};

// 关闭弹框
const closeDialog = () => {
  // 关闭的时候情况表单的红色校验信息
  console.log(ruleFormRef.value, "<<<=== ruleFormRef.value-关闭弹框");
  ruleFormRef.value.resetFields();

  dialogShow.value = false;
  // console.log("关闭了")
  newForm.value.supplierName = "";
  newForm.value.socialCreditCode = "";
  newForm.value.phone = "";
  newForm.value.contacter = "";
  newForm.value.supplierDeviceTypeList = [];
  newForm.value.notes = "";
  // 清空省市区表单数据
  newForm.value.province = "";
  newForm.value.city = "";
  newForm.value.area = "";
  newForm.value.detailAddress = "";
  // 清空市和区的数组
  areaDataArr.value = [];
  cityDataArr.value = [];
};

// 页面挂载时拿到主营产品下拉数据
onMounted(() => {
  getMainProduct()
    .then((res) => {
      console.log(res, "<<<=== res-主营产品下拉数据");
      mainProductArr.value = res.deviceTypeList;
      console.log(mainProductArr.value, "<<<=== mainProductArr");
    })
    .catch((error) => {
      console.log(error, "<<<=== error");
    });

  // 拉到省市区的数据
  getProvinceData(0)
    .then((res) => {
      console.log(res, "<<<=== res 省数据");
      regionDataArr.value = res.data;
      console.log(regionDataArr.value, "<<<=== regionDataArr");
    })
    .catch((error) => {
      console.log(error, "error");
    });
});

// 弹框点确定按钮触发事件
const submit = () => {
  console.log(newForm.value, "<<<=== newForm");
  // 改造传参数据-主营产品
  // console.log(newForm.value.supplierDeviceTypeList,"<<<===先")

  // newForm.value.supplierDeviceTypeList=newForm.value.supplierDeviceTypeList.map((item)=>{
  //     return {
  //         typeId:item.id,
  //         typeName:item.typeName
  //     }
  // })

  // console.log(newForm.value.supplierDeviceTypeList,"<<<===后")

  // console.log(provinceName.value,"provinceName.value")
  // console.log(cityName.value,"<<<=== cityName.value")
  // console.log(areaName.value,"<<<=== areaName.value")

  // 判断当前是新增还是编辑
  if (dialogTitle.value === "编辑") {
    console.log(ruleFormRef.value, "<<<=== ruleFormRef.value-编辑");
    // 校验所有的表单项
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        // 校验通过
        console.log("<<<=== 编辑时校验通过");
        // 组装参数
        const editParams = {
          id: editId.value,
          supplierName: newForm.value.supplierName,
          socialCreditCode: newForm.value.socialCreditCode,
          phone: newForm.value.phone,
          contacter: newForm.value.contacter,

          provinceId: newForm.value.province.areaCode,
          cityId: newForm.value.city.areaCode,
          countyId: newForm.value.area.areaCode,

          address: newForm.value.detailAddress,
          provinceName: provinceName.value,
          cityName: cityName.value,
          countyName: areaName.value,
          notes: newForm.value.notes,
          // supplierDeviceTypeList:newForm.value.supplierDeviceTypeList,
          supplierDeviceTypeList: newForm.value.supplierDeviceTypeList.map(
            (item) => {
              return {
                typeId: item.id,
                typeName: item.typeName,
              };
            }
          ),
        };

        console.log(editParams, "<<<=== editParams 编辑参数");
        console.log(ruleFormRef.value, "<<<=== ruleFormRef");
        // 编辑供应商发请求
        editSupplier(editParams)
          .then((res) => {
            console.log(res, "<<<=== res 编辑");
            // 将弹框的标题重新设置成空
            dialogTitle.value = "";

            closeDialog();
            getList();
          })
          .catch((error) => {
            console.log(error, "error");
          });
      } else {
        // 校验没有通过
        console.log("<<<=== 编辑时校验没有通过");
        return false;
      }
    });

    return;
  }

  // 校验全部的表单项
  console.log(ruleFormRef.value, "<<<=== ruleFormRef.value-点确定");
  ruleFormRef.value.validate((valid) => {
    // valid是真和假，表示所有的表单项都校验通过了和没有通过
    if (valid) {
      console.log("所有校验都通过了");
      // 组装form表单数据
      const params = {
        supplierName: newForm.value.supplierName,
        socialCreditCode: newForm.value.socialCreditCode,
        phone: newForm.value.phone,
        contacter: newForm.value.contacter,

        provinceId: newForm.value.province.areaCode,
        cityId: newForm.value.city.areaCode,
        countyId: newForm.value.area.areaCode,

        address: newForm.value.detailAddress,
        provinceName: provinceName.value,
        cityName: cityName.value,
        countyName: areaName.value,
        notes: newForm.value.notes,
        // supplierDeviceTypeList:newForm.value.supplierDeviceTypeList,
        supplierDeviceTypeList: newForm.value.supplierDeviceTypeList.map(
          (item) => {
            return {
              typeId: item.id,
              typeName: item.typeName,
            };
          }
        ),
      };
      console.log(params, "<<<=== params");
      // 新增供应商发请求
      addSupplier(params)
        .then((res) => {
          console.log(res, "<<<=== res");
          // 将弹框的标题重新设置成空
          dialogTitle.value = "";
          closeDialog();
          getList();
        })
        .catch((error) => {
          console.log(error, "error");
        });
    } else {
      console.log("校验没有通过");
      return false;
    }
  });
};

// 点击修改按钮进行编辑
const handleEdit = (data) => {
  // 将校验规则对象赋值给rules
  rules.value = {
    supplierName: [
      {
        required: true,
        validator: (rule, value, callback) => {
          console.log(value, "<<<=== value-输入的内容");
          console.log(rule, "<<<=== rule-你写的规则-必填");
          if (value) {
            callback(); // value有值则验证通过
          } else {
            callback(new Error("供应商名称不能为空")); // 验证不通过，返回错误信息
          }
        },
        trigger: "blur",
      },
    ],
    socialCreditCode: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("供应商社会信用代码不能为空"));
          }
        },
        trigger: "blur",
      },
    ],
    phone: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("联系电话不能为空"));
          }
        },
        trigger: "blur",
      },
    ],
    contacter: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("联系人不能为空"));
          }
        },
        trigger: "blur",
      },
    ],
    detailAddress: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("联系地址不能为空"));
          }
        },
        trigger: "blur",
      },
    ],
    supplierDeviceTypeList: [
      {
        required: true,
        validator: (rule, value, callback) => {
          console.log(value, "<<<=== value-主营产品的内容-数组");
          if (value.length > 0) {
            callback();
          } else {
            callback(new Error("主营产品不能为空"));
          }
        },
        trigger: "change",
      },
    ],
    province: [
      {
        required: true,
        validator: (rule, value, callback) => {
          console.log(value, "<<<=== value-省的内容-对象");
          if (value) {
            callback();
          } else {
            callback(new Error("省不能为空"));
          }
        },
        trigger: "change",
      },
    ],
    city: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("市不能为空"));
          }
        },
        trigger: "change",
      },
    ],
    area: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (value) {
            callback();
          } else {
            callback(new Error("区/县不能为空"));
          }
        },
        trigger: "change",
      },
    ],
  };
  console.log(data, "<<<=== data 点编辑拿到这一行的数据");
  // 打开弹框
  dialogShow.value = true;
  dialogTitle.value = "编辑";
  // 将当前行的id保存
  editId.value = data.id;
  console.log(editId.value, "editId.value");
  // 数据回显
  newForm.value.supplierName = data.supplierName;
  newForm.value.socialCreditCode = data.socialCreditCode;
  newForm.value.phone = data.phone;
  newForm.value.contacter = data.contacter;
  newForm.value.notes = data.notes;
  newForm.value.detailAddress = data.address;

  const productArr = data.supplierDeviceTypeList.map((item) => {
    return { id: item.typeId, typeName: item.typeName };
  });

  console.log(productArr, "<<<=== productArr");

  newForm.value.supplierDeviceTypeList = productArr;

  // 回显省市区
  newForm.value.province = {
    areaCode: data.provinceId,
    name: data.provinceName,
  };

  console.log(newForm.value.province, "回显省-newForm.value.province");

  // 回显省的中文名
  provinceName.value = data.provinceName;
  console.log(provinceName.value, "provinceName.value 回显省中文名字");

  // 根据省的code拿到市的数组
  getProvinceData(data.provinceId)
    .then((res) => {
      console.log(res, "<<<=== res 拿到市的数据2");
      cityDataArr.value = res.data;

      newForm.value.city = {
        areaCode: data.cityId,
        name: data.cityName,
      };
      console.log(newForm.value.city, "回显市-newForm.value.city");

      cityName.value = data.cityName;
      console.log(cityName.value, "cityName.value 回显市中文名字");
    })
    .catch((error) => {
      console.log(error, "error");
    });

  // 根据市的code拿到区的数组
  getProvinceData(data.cityId)
    .then((res) => {
      console.log(res, "<<<=== res 拿到区的数据2");
      areaDataArr.value = res.data;

      newForm.value.area = {
        areaCode: data.countyId,
        name: data.countyName,
      };

      console.log(newForm.value.area, "回显市-newForm.value.area");

      areaName.value = data.countyName;
      console.log(areaName.value, "areaName.value 回显区中文名字");
    })
    .catch((error) => {
      console.log(error, "<<<=== error");
    });
};

// 点击删除
const handleDelete = (res) => {
  console.log(res, "<<<=== res 点击删除");
  ElMessageBox.confirm(`确定要删除${res.supplierName}供应商?`, "提示", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      // 组装参数
      const params = [res.id];
      deleteData(params)
        .then((res) => {
          console.log(res, "<<<<==== res");
          ElMessage({
            type: "success",
            message: "删除成功",
          });

          getList();
        })
        .catch((error) => {
          console.log(error, "error");
        });
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "取消删除",
      });
    });
};

getList();
</script>

<style lang="scss" scoped>
.supplier-page {
  padding: 20px;
}

:deep(.el-form-item[id="index"] .el-form-item__label) {
  // border:1px solid orange;
  width: 82px !important;
}

// 改市的下拉框的长度
:deep(.el-form-item[id="citycontent"] .el-form-item__content) {
  margin-left: 3px !important;
}

// 改区的下拉框的长度
:deep(.el-form-item[id="areacontent"] .el-form-item__content) {
  margin-left: 3px !important;
}
</style>
